<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3666235_qlur58pnda.css" />
  <style>
    .content {
      display: flex;
      align-items: center;
    }

    ul {
      height: 300px;
    }

    .active {
      background-color: red;
    }
  </style>
  <div id="app">
    <div class="content">
      <ul>
        <h2><input type="checkbox" v-model="leftAllcheck" /> 列表一</h2>

        <li v-for="(item,index) in left" :key="item.text"><input type="checkbox" :id="'itemleft'+index"
            v-model="item.checked" /> <label :for="'itemleft'+index"> {{item.text}}</label> </li>

      </ul>
      <div class="arrow">
        <p><button @click="transfer('push')">&gt;</button></p>
        <p><button @click="transfer('pop')">&lt;</button></p>
      </div>
      <ul>
        <h2><input type="checkbox" v-model="rightAllcheck" /> 列表二</h2>

        <li v-for="item in right" :key="item.text"><input type="checkbox" v-model="item.checked" /> {{item.text}} </li>

      </ul>



    </div>

    {{list}}
    <hr>

  </div>
</body>
<script src="vue.js"></script>
<script>
  const {
    createApp,
    ref,
    reactive,
    computed
  } = Vue;
  //  checked  选中  也就是是否打钩
  // selected   挑中 为true表示被放在了右侧  
  const listData = [{
    text: "选项1",
    checked: false,
    selected: false
  },
  {
    text: "选项2",
    checked: false,
    selected: false
  },
  {
    text: "选项3",
    checked: false,
    selected: false
  },
  {
    text: "选项4",
    checked: false,
    selected: false
  },
  {
    text: "选项5",
    checked: false,
    selected: false
  },
  {
    text: "选项6",
    checked: false,
    selected: false
  },
  {
    text: "选项7",
    checked: false,
    selected: false
  },
  ]

  const app = createApp({

    setup() {


      let list = ref(listData)

      //  左侧  selected  === false   
      let left = computed(function () {
        return list.value.filter(v => !v.selected)
      })

      // 右侧 selected === true
      let right = computed(function () {
        return list.value.filter(v => v.selected)
      })

      function checkedHandler(data) {

        return computed({
          get() {
            if (data.value.length === 0) return false
            return data.value.every(v => {
              return v.checked
            })
          },
          set(status) {
            data.value.forEach(v => {
              return v.checked = status
            })
          }
        })
      }


      const leftAllcheck = checkedHandler(left)
      const rightAllcheck = checkedHandler(right)


      function transfer(arrow) {
        let isPush = arrow === 'push'
        list.value.forEach(function (v) {
          if (v.checked && v.selected !== isPush) {
            v.selected = isPush

            //  穿梭的数据  去掉对号
            v.checked = false
          }
        })

      }
      return {
        left,
        right,
        list,
        rightAllcheck,
        leftAllcheck,
        transfer
      }
    }

  })

  app.mount('#app')
</script>

</html>